<template>
  <div class="flex h-full">
    <a-card class="mr-2" :body-style="{ height: '100%', display: 'flex', flexDirection: 'column' }">
      <PatientListDrawer
        :patient-list="patientList"
        :loading="loading"
        :border-bottom="false"
        :selected-item="selectedItem"
        @select="selectPatient"
        @refresh="getInpRecordList"
      >
        <template #search>
          <div class="w-full px-2">
            <SelectArea
              v-model:value="searchParams.bqid"
              use-cache
              post-url
              class="w-full"
              :post-params="{ wardTypeCodes: ['QYLB001', 'QYLB002'] }"
              @change="getInpRecordList()"
            />
          </div>
        </template>
        <template #tabRadio>
          <div class="p-2 w-full -mt-2 border-b">
            <a-input-search
              v-model:value="searchParams.zjm"
              class="w-full"
              placeholder="姓名/助记码/床位号"
              @search="getInpRecordList()"
              @change="getInpRecordList()"
            />
          </div>
        </template>
      </PatientListDrawer>
    </a-card>
    <div class="flex flex-col flex-1 overflow-hidden">
      <PatientInfoHeader :patient-info="selectedItem">
        <template #prefix>
          <div class="text-2xl pr-4 text-primary font-semibold">{{ selectedItem.bedCode }}床</div>
        </template>
        <a-divider type="vertical" :style="{ height: '40px', margin: '0 16px' }" />
        <div>
          <div class="flex items-center">
            <LabelValue label="住院科室" :width="200" :value="selectedItem.ksmc" />
            <LabelValue label="住院号" :width="220" :value="selectedItem.admissionCode" />
            <!-- <LabelValue label="过敏史" :width="200" :value="selectedItem.brGms" /> -->
            <AllergyHistory :width="200" :value="selectedItem.brGms" :patient-info="selectedItem" @success="(e) => (selectedItem.brGms = e)" />
            <LabelValue label="保险信息" :width="200" :value="selectedItem.bxxx" />
            <LabelValue label="住院天数" :width="160" :value="selectedItem.zyts" />
          </div>
          <div class="flex items-center">
            <LabelValue label="住院病区" :width="200" :value="selectedItem.wardName" />
            <LabelValue label="入区时间" :width="220" :value="selectedItem.lastDeptRegTime" />
            <LabelValue label="账户余额" :width="200" :value="formatAmount(selectedItem.yjje) + '元'" />
            <LabelValue label="入院诊断" :width="160" :value="selectedItem.ryzd" />
          </div>
        </div>
      </PatientInfoHeader>
      <div class="flex flex-1 mt-2 overflow-hidden">
        <a-card class="flex-1 overflow-hidden" :body-style="{ padding: '0 8px', height: '100%', overflow: 'hidden' }">
          <div class="flex justify-between mt-2">
            <div class="flex">
              <a-radio-group v-model:value="tabsKey" button-style="solid" :disabled="loading" @change="getData">
                <a-radio-button :value="0">补记账</a-radio-button>
                <a-radio-button :value="2">全部已记账</a-radio-button>
              </a-radio-group>
              <a-input-search
                v-if="tabsKey === 0"
                v-model:value="formState.pyjm"
                allow-clear
                :disabled="loading"
                class="ml-2 w-56 mr-4"
                placeholder="项目名称/助记码"
                @search="getData"
              />
              <div v-if="tabsKey === 0" class="flex items-center ml-4">
                <a-radio-group v-model:value="formState.timeType" :disabled="loading" @change="getData">
                  <a-radio :value="0">全部</a-radio>
                  <a-radio :value="1">今日执行</a-radio>
                </a-radio-group>
              </div>
            </div>
          </div>
          <Unbooked v-if="tabsKey === 0" ref="unBookedRef" :selected-item="selectedItem" :form-state="formState" />
          <Booked v-if="tabsKey === 2" ref="bookedRef" :selected-item="selectedItem" :form-state="formState" />
        </a-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { useRoute } from 'vue-router'
import PatientInfoHeader from '@/components/business/PatientInfoHeader'
import PatientListDrawer from '@/components/business/PatientListDrawer'
import LabelValue from '@/components/LabelValue'
import { formatAmount } from '@/utils/format'
import { post } from '@/utils/request'

import Unbooked from './components/Unbooked.vue'
import Booked from './components/Booked.vue'

const route = useRoute()
const tabsKey = ref(0)
const patientList = ref([])
const selectedItem = ref({})
const unBookedRef = ref(null)
const bookedRef = ref(null)
const formState = ref({
  pyjm: '',
  timeType: 1,
  accountType: 1
})
const loading = ref(true)
const searchParams = ref({
  bqid: '',
  zjm: ''
})
//获取左侧列表数据
const getInpRecordList = async () => {
  loading.value = true
  selectedItem.value = {}
  const { code, data, msg } = await post('/inp/inpComprehensive/getInpRecordInfo', {
    bqid: searchParams.value.bqid,
    zjm: searchParams.value.zjm
  })
  loading.value = false
  if (code !== 0) return message.error(msg)
  patientList.value = data
  if (route.query?.inplsh) {
    const itemVal = data.filter((item) => item.inplsh === route.query?.inplsh)
    itemVal.length && (selectedItem.value = itemVal[0])
  } else {
    selectedItem.value = data[0]
  }
}

//选中的数据
const selectPatient = (patient) => {
  selectedItem.value = patient
  getData()
}

//获取数据
const getData = async () => {
  setTimeout(function () {
    if (tabsKey.value === 0) unBookedRef.value?.getData()
    if (tabsKey.value === 2) bookedRef.value?.getData()
  }, 100)
}
onMounted(() => {
  getInpRecordList()
})
</script>
<style lang="less" scoped>
.bg-color {
  background: var(--thin-color);
}
:deep(.ant-table-row-expand-icon) {
  display: none;
}
.classify-checkall {
  .ant-tag {
    font-size: 14px;
    line-height: 30px;
    padding-inline: 14px;
  }
}
</style>
